<h6 class="card-header">
    <span ng-bind="$ctrl.title"></span>
    <a ng-click="$ctrl.addAttr()" class="btn btn-primary btn-sm float-right text-white">Add New</a>
    <!-- <a ng-click="$ctrl.generateForm()" class="btn btn-primary btn-sm float-right text-white mr-2">Generate Form</a> -->
</h6>
<table class="table table-sm" id="Table">
    <thead class="thead-light">
        <tr>
            <th>
                <span class="fas fa-sort-numeric-down"></span>
            </th>
            <th>Title</th>
            <!--<th >Name</th>-->
            <th>Type</th>
            <!--<th >Width</th>-->
            <th>Unique</th>
            <th>Required</th>
            <!--<th >GroupBy</th>-->
            <th>Select</th>
            <th>Display</th>
            <th></th>
        </tr>
    </thead>
    <tbody class="sortable" dnd-list="$ctrl.columns">
        <tr class="sortable-item module-column" ng-repeat="col in $ctrl.columns track by $index" dnd-draggable="col" dnd-effect-allowed="move" dnd-selected="selectedCol = col" dnd-moved="$ctrl.columns.splice($index, 1)" ng-class="{'selected': $ctrl.selectedCol === col}">
            <td style="cursor:move;" class="drag-header">
                <span class="fas fa-sort"></span>
            </td>
            <td>
                <input ng-model="col.title" placeholder="Title" ng-change="$ctrl.generateName(col)" class="form-control form-control-sm">
                <small class="form-text text-muted">Name: <span ng-bind="col.name"></span></small>
            </td>
            <td>
                <select class="form-control form-control-sm" ng-model="col.dataType">
                    <option ng-repeat="item in $ctrl.settings.dataTypes track by $index" ng-value="$index">{{item}}
                    </option>
                </select>
            </td>
            <!--<td>
                <input ng-model="col.width" class="form-control form-control-sm" />
            </td>-->
            <td>
                <input class="" type="checkbox" ng-model="col.isUnique">
            </td>
            <td>
                <input class="" type="checkbox" ng-model="col.isRequired">
            </td>
            <!--<td>
                <span class="switch">
                    <input id="isGroupBy_{{$index}}" type="checkbox" class="switch" ng-model="col.isGroupBy">
                    <label for="isGroupBy_{{$index}}">&nbsp;</label>
                </span>
            </td>-->
            <td>
                <input class="" type="checkbox" ng-model="col.isSelect">
            </td>
            <td>
                <input class="" type="checkbox" ng-model="col.isDisplay">
            </td>
            <td>
                <a class="btn btn-sm btn-light del-popover" ng-click="$ctrl.removeAttr($index);">
                    <span class="fas fa-times text-danger"></span>
                </a>
            </td>
        </tr>
        <tr class="module-column" ng-repeat="col in $ctrl.columns track by $index" ng-if="col.isSelect">
            <td colspan="8">
                <div class="col-12">
                    <!-- <div class="col-12">
                        <h1 ng-bind="col.name"></h1>
                        <input type="text" id="option_{{$index}}" ng-enter="addOption(col,$index)" placeholder="fill then enter to add options" class="form-control">
                    </div> -->
                    <div class="form-group row mb-0">
                        <label for="staticEmail" class="col-sm-3 col-form-label" ng-bind="col.title"></label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control form-control-sm" id="option_{{$index}}" ng-enter="$ctrl.addOption(col,$index)" placeholder="fill then enter to add options">
                        </div>
                    </div>
                    <div class="row pb-1" ng-repeat="opt in col.options track by $index">
                        <div class="col-11">
                            <input type="text" class="form-control form-control-sm" ng-model="col.options[$index]">
                        </div>
                        <div class="col-1">
                            <a class="btn" ng-click="col.options.splice($index,1)">
                                <span class="fas fa-times text-danger"></span>
                            </a>
                        </div>
                    </div>
                </div>

            </td>
        </tr>
    </tbody>
</table>
